<template>
  <div>
    <crumb />
    <div class="course-task">
      <div class="title-ul">
        <div :class="`title-li ${active === 1 ? 'active' : ''}`" @click="changeActive(1)">
          当前任务（{{info.doingNum}}）
        </div>
        <div :class="`title-li ${active === 2 ? 'active' : ''}`" @click="changeActive(2)">
          已完成（{{info.finishedNum}}）
        </div>
        <div :class="`title-li ${active === 3 ? 'active' : ''}`" @click="changeActive(3)">
          未完成（{{info.outDateNum}}）
        </div>
      </div>
      <div class="list">
        <InsTable tableHeight="800" :index="true" :table-head="tableHead" :table-data="tableData">
          <!-- 自定义列 操作 -->
          <el-table-column slot="taskFinishedFlag" slot-scope="headScope" fixed="right" align="center" :label="headScope.head.label">
            <template slot-scope="scope">
              <span>{{scope.row.taskFinishedFlag === '1' ? '未开始' : scope.row.taskFinishedFlag === '2' ? '进行中' : scope.row.taskFinishedFlag === '3' ? '已完成' : '已过期' }}</span>
            </template>
          </el-table-column>
          <el-table-column slot="opera" slot-scope="headScope" fixed="right" align="center" :label="headScope.head.label">
            <template slot-scope="scope">
              <span style="cursor: pointer;" @click="toDetail(scope.row)">进入任务</span>
            </template>
          </el-table-column>
        </InsTable>
      </div>
    </div>
  </div>
</template>

<script>
import { taskIndex, checkTaskFlag } from '@/api/student/lesson/task'
import InsTable from '@/components/InsTable'

export default {
  data () {
    return {
      tableHead: [
        {
          label: '类型',
          prop: 'taskTypeName'
        },
        {
          label: '标题',
          prop: 'resourceLessonName'
        },
        {
          label: '题量',
          prop: 'subjectNum'
        },
        {
          label: '发布时间',
          prop: 'taskStartTime'
        },
        {
          label: '限时',
          prop: 'taskDuration'
        },
        {
          label: '进度',
          prop: 'finishedRate'
        },
        {
          label: '状态',
          prop: 'taskFinishedFlag',
          isSlot: true
        },
        {
          label: '操作',
          prop: 'opera',
          isSlot: true
        }
      ],
      tableData: [],
      info: {},
      active: 1
    }
  },
  methods: {
    async taskIndex () {
      const res = await taskIndex({
        startTime: '',
        endTime: ''
      })
      this.info = res.data
      this.changeActive(1)
    },
    changeActive (type) {
      this.active = type
      switch (type) {
        case 1:
          this.tableData = this.info.doingList
          break
        case 2:
          this.tableData = this.info.finishedList
          break
        case 3:
          this.tableData = this.info.outDateList
          break
      }
      console.log(this.tableData)
    },
    async toDetail (item) {
      const res = await checkTaskFlag({
        id: item.id,
        taskType: item.taskType
      })
      console.log(res.data)
      if (res.data.checkStatus) {
        this.$router.push({
          path: '/student/course/taskDetail',
          query: { id: item.id, type: item.taskType }
        })
      } else {
        this.$message.error(res.data.alertMes)
      }
    }
  },
  components: {
    InsTable
  },
  mounted () {
    this.taskIndex()
  }
}
</script>

<style scoped lang="scss">
.course-task {
  height: 937px;
  width: 1200px;
  margin: 0 auto;
  .title-ul {
    width: 480px;
    height: 48px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(229, 229, 229, 1);
    border-right: none;
    display: flex;
    align-items: center;
    .title-li {
      flex: 1;
      height: 48px;
      line-height: 48px;
      text-align: center;
      border-right: 1px solid rgba(229, 229, 229, 1);
      cursor: pointer;
      &.active {
        background: #009cf6;
        color: #ffffff;
      }
    }
  }
}
</style>
